<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            line-height: 60px;
        }

        li {
            list-style: none;
            line-height: 40px;
            border: 1px dashed #333;
        }

        .list {
            overflow: hidden;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div>
        <button>插入同级1</button>
        <button>插入同级2</button>
    </div>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span class="demo">06</span></li>
        </ul>
    </div>
</body>
<script>
    // jquery中如何创建元素?
    // 1. 通过原生创建元素节点   => 再转化为jquery对象 
    // 2. $(html) 接收一个html结构  => 返回对应元素形成的jquery对象
    // 3. $(html,option) 除了接收一个html结构,还可以接收一个对象参数 作为该元素的修饰  => 返回对应元素形成的jquery对象


    // 如何将创建的元素 放到父元素中


    // $(newEle).insertBefore(oldEle)   将一个元素(新的|已存在的)插入到另一个(已存在元素)的前面
    // $(newEle).insertAfter(oldEle)    将一个元素(新的|已存在的)插入到另一个(已存在元素)的后面


    $("button").eq(0).click(function () {
        $("<li>", {
            text: "我是新增的li",  // innerText
            class: "a3",           // className
            click: function () {
                console.log($(this).index());
            },
            css: {
                background: "red",
                width: 200,
                height: 100,
            }
        }).insertBefore(".mid");
    })
    $("button").eq(1).click(function () {
        $("<li>", {
            text: "我是新增的li",  // innerText
            class: "a3",           // className
            click: function () {
                console.log($(this).index());
            },
            css: {
                background: "red",
                width: 200,
                height: 100,
            }
        }).insertAfter(".mid");
    })







</script>

</html>